<%@page contentType="text/html;charset=utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>我的黑名单</title>
<link rel="icon" href="../favicon.ico" type="image/ico">
<link href="${base}/css/bootstrap.min.css" rel="stylesheet">
<link href="${base}/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${base}/css/style.min.css" rel="stylesheet">
  <style>
    #box{
      position: fixed;
      padding: 20px;
      width: 600px;
      height: 400px;
      background-color:cornflowerblue;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 4px;
      box-shadow: 2px 2px 4px rgba(0,0,0,.2);
    }
    img{
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
  </style>
</head>
  
<body>
<div class="topbar" style="background-color: deepskyblue;opacity: 0.5">
  <div class="topbar-left">
    <div class="lyear-aside-toggler">
    </div>
    <span class="navbar-page-title" style="margin-left: 80px"> <h3 style="color: black">黑名单</h3> </span>
  </div>
  <ul class="topbar-right">
    <li class="dropdown dropdown-profile">
      <img style="display: inline-block" class="img-avatar img-avatar-48 m-r-10" src="${base}/upload/${theUser.headpic}" />
      <span style="color: crimson">${theUser.name}</span>
      <a style="display: inline-block;color: black" href="${base}/toHome">回到首页</a>
    </li>
  </ul>
</div>
<div class="container-fluid" >
  <div class="row">
    <div class="col-lg-12" style="background-image: url(${base}/img/444.jpg);background-size: 120%">
      <div class="card"  style="width: 1200px;height: 800px;margin-left:auto;margin-right:auto;opacity: 0.9">
        <div>
          <form  method="get" action="${base}/friends/selecthmd" >
            <div class="input-group" >
              <input type="text" class="form-control" value="" name="likes" placeholder="根据电话或者名字搜索"
                     style="width: 230px;margin-top: 20px;margin-left: 25px; ">
                <button class="btn btn-cyan btn-w-md" type="submit" style="margin-top: 20px;width: 100px"
                >搜索</button>
                <input type="hidden" name="search_field" id="search-field" value="title">
            </div>
          </form>
        </div>
        <div class="card-toolbar clearfix">
          <div class="toolbar-btn-action">
            <a class="btn btn-primary m-r-5" href="${base}/friends/selectAllfs"></i>我的好友</a>
            <a class="btn btn-danger" onclick="removeAll()">移出黑名单</a>
          </div>
        </div>
        <div id="box" hidden>-------
        </div>
        <div class="card-body">

          <div class="table-responsive">
            <form action="" method="post" id="hmdform">
              <table class="table table-bordered">
                <thead>
                <tr>
                  <th>
                    <label class="lyear-checkbox checkbox-primary">
                      <input type="checkbox" id="check-all"><span></span>
                    </label>
                  </th>
                  <th>头像</th>
                  <th>用户名</th>
                  <th>姓名</th>
                  <th>手机</th>
                  <th>性别</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="f" items="${p.list}">
                  <tr>
                    <td>
                      <label class="lyear-checkbox checkbox-primary">
                        <input type="checkbox" name="ckss" value="${f.id}"><span></span>
                      </label>
                    </td>
                    <td><img src="${base}/upload/${f.headpic}" alt=""></td>
                    <td>${f.account}</td>
                    <td>${f.name}</td>
                    <td>${f.phone}</td>
                    <td>${f.sex eq 1?"男":"女"}</td>
                    <td>
                      <div class="btn-group">
                        <a class="btn btn-xs btn-default" href="${base}/friends/removehmd?userid=${f.id}" title="移出黑名单" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                      </div>
                    </td>
                  </tr>
                </c:forEach>
                </tbody>
              </table>
            </form>
          </div>
          <ul class="pagination">
            <ul class="pagination">
              <li><a href="${base}/friends/selecthmd?pageNum=1&likes=${likes}">«</a></li>
              <li><a href="${base}/friends/selecthmd?pageNum=${p.prePage}&likes=${likes}">上一页</a></li>
              <c:forEach var="i" items="${p.navigatepageNums}">
                <li <c:if test="${i eq p.pageNum}">class="active"</c:if>><a
                        href="${base}/friends/selecthmd?pageNum=${i}&likes=${likes}">${i}</a></li>
              </c:forEach>
              <li><a href="${base}/friends/selecthmd?pageNum=${p.nextPage}&likes=${likes}">下一页</a></li>
              <li><a href="${base}/friends/selecthmd?pageNum=${p.pages}&likes=${likes}">»</a></li>
            </ul>
          </ul>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${base}/js/main.min.js"></script>
<script type="text/javascript">
  $(function(){
      $('.search-bar .dropdown-menu a').click(function() {
          var field = $(this).data('field') || '';
          $('#search-field').val(field);
          $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
      });
  });
  document.onclick = function( event ){
    if( !box.contains(event.target) && mybtn != event.target ){
      box.hidden=true;
    }
  }
  function removeAll() {
    $("#hmdform").attr("action","${base}/friends/removehmdAll");
    $("#hmdform").submit();
  }
</script>
</body>
</html>